<template>
	<div id="myPanel">
		<div class="container right-panel-active">
			<!-- 注册 注册有新的页面 这里不用 -->
			<div class="container__form container--signup">
				<form action="#" class="form" id="form1">
					<h2 class="form__title">注册</h2>
					<input type="text" placeholder="User" class="input">
					<input type="email" placeholder="Email" class="input">
					<input type="password" placeholder="Password" class="input">
					<button class="btn" @click="register()">去注册</button>
				</form>
			</div>
		
			<!-- 登录-->
			<div class="container__form container--signin">
				<form action="#" class="form" id="form2">
					<h2 class="form__title">登录</h2>
					<input type="text" placeholder="账号" class="input" 
					v-model="infor.username" required="required" 
					@keyup.enter="loginSubmit()">
					<input type="password" placeholder="密码" 
					v-model="infor.pwd"
					required="required" class="input">
					<a href="#" class="link" @click="forgetPWD()">忘记密码?</a>
					<button class="btn" @click="loginSubmit()">登录</button>
					<button class="btn" @click="reset()">重置</button>
				</form>
			</div>
		
			<!-- Overlay -->
			<div class="container__overlay">
				<div class="overlay">
					<div class="overlay__panel overlay--left">
						<button class="btn" id="signIn">去登录</button>
					</div>
					<div class="overlay__panel overlay--right">
						<button class="btn" id="signUp"@click="register()">去注册</button>
						<button class="btn" id="signUp"@click="toIndex()">回首页</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'Login',
		props: {
			msg: String
		},
		mounted() {
			const signInBtn = document.getElementById("signIn");
			const signUpBtn = document.getElementById("signUp");
			const fistForm = document.getElementById("form1");
			const secondForm = document.getElementById("form2");
			const container = document.querySelector(".container");

			//默认只显示登录,注册那边不要显示了
			container.classList.remove("right-panel-active");
			
			signInBtn.addEventListener("click", () => {
				container.classList.remove("right-panel-active");
			});

			signUpBtn.addEventListener("click", () => {
				container.classList.add("right-panel-active");
			});

			fistForm.addEventListener("submit", (e) => e.preventDefault());
			secondForm.addEventListener("submit", (e) => e.preventDefault());
		},
		data() {
			return {
				pwdFlag: false,
				infor: {
					username: 'lwd1513',
					pwd: '123456',
				},
			};
		},
		created() {

		},
		methods: {
			reset() {
				this.infor.pwd = '';
				this.infor.username = '';
			},
			//显示密码和不显示密码
			changType() {
				var pwd_input = document.getElementById("pwd");
				var pwd_img = document.getElementsByClassName("pwd_img");
				// console.log(pwd_img[0].src);
				console.log(this.pwdFlag);
				this.pwdFlag = !this.pwdFlag;
				if (this.pwdFlag == true) {
					// console.log(pwd_img[0].src);
					pwd_img[0].style.display = "block";
					pwd_img[1].style.display = "none";
					pwd_input.type = "text";
				} else {
					pwd_img[0].style.display = "none";
					pwd_img[1].style.display = "block";
					pwd_input.type = "password";
				}
			},
			//登录按钮
			loginSubmit: async function() {
				console.log('点击了登录按钮')
				if (!this.infor.username) {
					this.$message.error("用户名不能为空")
					return
				}
				if (!this.infor.pwd) {
					this.$message.error("密码不能为空")
					return
				}
				let _this = this;
				let url = "/api/mall/MemberServlet2?method=MemberLogin";
				await this.$http.get(url, {
					params: {
						username: this.infor.username,
						password: this.infor.pwd
					}
				}).then(function(response) {
					if (response.data.code == 0) {

						let memberLoginInfo = response.data.data
						console.log('memberLoginInfo', memberLoginInfo)
						window.sessionStorage.setItem("memberInfo", JSON.stringify(memberLoginInfo))
						_this.$router.replace('/Index');

						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});

					} else {
						_this.$message.error(response.data.msg)
						return false;
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			toIndex(){
				console.log("点击了注册按钮")
				this.$router.push('/Index');
			},
			register() {
				console.log("点击了注册按钮")
				this.$router.push('/Register');
			},
			forgetPWD() {
				this.$message.warning("请联系管理员修改密码!")
			}
		},
	}
</script>

<style >
	button,
	hr,
	input {
		overflow: visible
	}

	audio,
	canvas,
	progress,
	video {
		display: inline-block
	}

	progress,
	sub,
	sup {
		vertical-align: baseline
	}

	html {
		font-family: sans-serif;
		line-height: 1.15;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%
	}

	body {
		margin: 0
	}

	menu,
	article,
	aside,
	details,
	footer,
	header,
	nav,
	section {
		display: block
	}

	h1 {
		font-size: 2em;
		margin: .67em 0
	}

	figcaption,
	figure,
	main {
		display: block
	}

	figure {
		margin: 1em 40px
	}

	hr {
		box-sizing: content-box;
		height: 0
	}

	code,
	kbd,
	pre,
	samp {
		font-family: monospace, monospace;
		font-size: 1em
	}

	a {
		background-color: transparent;
		-webkit-text-decoration-skip: objects
	}

	a:active,
	a:hover {
		outline-width: 0
	}

	abbr[title] {
		border-bottom: none;
		text-decoration: underline;
		text-decoration: underline dotted
	}

	b,
	strong {
		font-weight: bolder
	}

	dfn {
		font-style: italic
	}

	mark {
		background-color: #ff0;
		color: #000
	}

	small {
		font-size: 80%
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative
	}

	sub {
		bottom: -.25em
	}

	sup {
		top: -.5em
	}

	audio:not([controls]) {
		display: none;
		height: 0
	}

	img {
		border-style: none
	}

	svg:not(:root) {
		overflow: hidden
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0
	}

	button,
	input {}

	button,
	select {
		text-transform: none
	}

	[type=submit],
	[type=reset],
	button,
	html [type=button] {
		-webkit-appearance: button
	}

	[type=button]::-moz-focus-inner,
	[type=reset]::-moz-focus-inner,
	[type=submit]::-moz-focus-inner,
	button::-moz-focus-inner {
		border-style: none;
		padding: 0
	}

	[type=button]:-moz-focusring,
	[type=reset]:-moz-focusring,
	[type=submit]:-moz-focusring,
	button:-moz-focusring {
		outline: ButtonText dotted 1px
	}

	fieldset {
		border: 1px solid silver;
		margin: 0 2px;
		padding: .35em .625em .75em
	}

	legend {
		box-sizing: border-box;
		color: inherit;
		display: table;
		max-width: 100%;
		padding: 0;
		white-space: normal
	}

	progress {}

	textarea {
		overflow: auto
	}

	[type=checkbox],
	[type=radio] {
		box-sizing: border-box;
		padding: 0
	}

	[type=number]::-webkit-inner-spin-button,
	[type=number]::-webkit-outer-spin-button {
		height: auto
	}

	[type=search] {
		-webkit-appearance: textfield;
		outline-offset: -2px
	}

	[type=search]::-webkit-search-cancel-button,
	[type=search]::-webkit-search-decoration {
		-webkit-appearance: none
	}

	::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit
	}

	summary {
		display: list-item
	}

	[hidden],
	template {
		display: none
	}

	:root {
		/* COLORS */
		--white: #e9e9e9;
		--gray: #333;
		--blue: #0367a6;
		--lightblue: #008997;

		/* RADII */
		--button-radius: 0.7rem;

		/* SIZES */
		--max-width: 758px;
		--max-height: 420px;

		font-size: 16px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
			Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}

	#myPanel {
		align-items: center;
		background-color: var(--white);
		background: url("../assets/img/bg2.jpg");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: grid;
		height: 100vh;
		place-items: center;
	}

	.form__title {
		font-weight: 300;
		margin: 0;
		margin-bottom: 1.25rem;
	}

	.link {
		color: var(--gray);
		font-size: 0.9rem;
		margin: 1.5rem 0;
		text-decoration: none;
	}

	.container {
		background-color: var(--white);
		border-radius: var(--button-radius);
		box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
			0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
		height: var(--max-height);
		max-width: var(--max-width);
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	.container__form {
		height: 100%;
		position: absolute;
		top: 0;
		transition: all 0.6s ease-in-out;
	}

	.container--signin {
		left: 0;
		width: 50%;
		z-index: 2;
	}

	.container.right-panel-active .container--signin {
		transform: translateX(100%);
	}

	.container--signup {
		left: 0;
		opacity: 0;
		width: 50%;
		z-index: 1;
	}

	.container.right-panel-active .container--signup {
		-webkit-animation: show 0.6s;
		animation: show 0.6s;
		opacity: 1;
		transform: translateX(100%);
		z-index: 5;
	}

	.container__overlay {
		height: 100%;
		left: 50%;
		overflow: hidden;
		position: absolute;
		top: 0;
		transition: transform 0.6s ease-in-out;
		width: 50%;
		z-index: 100;
	}

	.container.right-panel-active .container__overlay {
		transform: translateX(-100%);
	}

	.overlay {
		background-color: var(--lightblue);
		background: url("../assets/img/bg2.jpg");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		left: -100%;
		position: relative;
		transform: translateX(0);
		transition: transform 0.6s ease-in-out;
		width: 200%;
	}

	.container.right-panel-active .overlay {
		transform: translateX(50%);
	}

	.overlay__panel {
		align-items: center;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		position: absolute;
		text-align: center;
		top: 0;
		transform: translateX(0);
		transition: transform 0.6s ease-in-out;
		width: 50%;
	}

	.overlay--left {
		transform: translateX(-20%);
	}

	.container.right-panel-active .overlay--left {
		transform: translateX(0);
	}

	.overlay--right {
		right: 0;
		transform: translateX(0);
	}

	.container.right-panel-active .overlay--right {
		transform: translateX(20%);
	}

	.btn {
		background-color: var(--blue);
		background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
		border-radius: 20px;
		border: 1px solid var(--blue);
		color: var(--white);
		cursor: pointer;
		font-size: 0.8rem;
		font-weight: bold;
		letter-spacing: 0.1rem;
		padding: 0.9rem 4rem;
		text-transform: uppercase;
		transition: transform 80ms ease-in;
	}

	.form>.btn {
		margin-top: 1.5rem;
	}

	.btn:active {
		transform: scale(0.95);
	}

	.btn:focus {
		outline: none;
	}

	.form {
		background-color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 3rem;
		height: 100%;
		text-align: center;
	}

	.input {
		background-color: #fff;
		border: none;
		padding: 0.9rem 0.9rem;
		margin: 0.5rem 0;
		width: 100%;
	}

	@-webkit-keyframes show {

		0%,
		49.99% {
			opacity: 0;
			z-index: 1;
		}

		50%,
		100% {
			opacity: 1;
			z-index: 5;
		}
	}

	@keyframes show {

		0%,
		49.99% {
			opacity: 0;
			z-index: 1;
		}

		50%,
		100% {
			opacity: 1;
			z-index: 5;
		}
	}
</style>
